<template>
    <div class="bodyBox">
        <div class="alertbig" :class="{noalert:show}">
            <div class="alert" :class="{noalert:show}">
                <div class="alertTop">
                    弹框提示
                    <img src="../../assets/img/plan/images/close_03.png" alt="" @click="close">
                </div>
                <span :class="{noalert:showword}">
                    限制输入10个字符，请重新输入
                </span>
                <span :class="{noalert:showdel}">
                    删除成功！
                </span>
            </div>
        </div>        
        <div class="topbox">
            <span>当前位置:</span>
            <el-checkbox v-model="checked" disabled>{{this.leftinfo}}</el-checkbox>
        </div>
        <div class="planLeft">
            <div class="allPlan">
                <div class="select">
                    <select name="" class="selectdate" v-model="planid" @click="planchange">
                        <option value="1">所有计划</option>
                        <option value="2">进行计划</option>
                        <option value="3">过期计划</option>
                    </select>                   
                </div>
                <div class="plansearch">
                    <input type="text" placeholder="输入计划名称" class="planName" v-model="planname" maxlength="10" @keyup="showkey($event)">
                    <img src="../../assets/img/plan/images/search_03.png" alt="">
                </div>
                <input type="button" value="搜索计划" class="searchPlan" @click="searchplan">
            </div>
            <!-- 计划展示 -->
            <div class="planpartBox">
                <div class="planpart" :class="{colorblue:item.is_expired==0,colorblack:item.is_expired==1,colorclick:item.id == activeIndex}" v-for="(item,index) in plandata" :key="index" @click="showplan(item.title,item.id)">
                    {{item.title}}
                </div>
            </div>
            <div class="leftBottom">
                <span>备注：</span> 
                <div class="blueWord"></div>
                <span>进行计划 </span>
                <div class="blueWord blackWord"></div>
                <span>过期计划 </span>
            </div>
        </div>
        <div class="planRight">
            <!-- 文本、计划详情 -->
            <div class="textPlan">
                <span :class="{spanactive:activered}" @click="showtext">文本计划</span>
                <div class="bottomLine" :class="{showtextline:opaactive}"></div>
                <!-- <span :class="{spanactive:showred}" @click="showinforplan">计划详情</span> -->
                <div class="bottomLine rightLine" :class="{showtextline:opalineactive}"></div>
                <span class="freshDate">刷新时间:<i>{{this.nowtime}}</i></span>
            </div>
            <div class="planbox">
                <!-- 文本计划详情 -->
                <div :class="{showtextinfor:disactive}">
                    <!-- 收藏 -->
                    <div class="nowChoose">
                        <span>当前选择</span>
                        <div class="chosseBox" :class="{showbox:none}">{{this.namevalue}}</div>
                        <div class="scPlanbox" @click="collection">
                            <div class="collimg" >
                                <img v-if="this.plancol==0" src="../../assets/img/plan/images/shoucang_59.png" alt="">
                                <img v-if="this.plancol==1" src="../../assets/img/plan/images/redcol_03.png" alt="">
                            </div>
                            <!-- <div class="collimg" >
                                <img src="../../assets/img/plan/images/redcol_03.png" alt="">
                            </div> -->
                            <span class="scPlan">收藏计划</span>
                        </div>
                    </div>
                    <div class="Information InformationTop" id="resettext" :class="{showtextinfor:disactive}">
                    <!--文本计划-->
                    <div :class="{showinfor:showtrue}" v-if="this.infordata==null">
                        <p>
                            <span>彩盟人工计划</span>
                        </p>
                        <p>
                            <span>彩盟计划，精准的人工计划联盟！</span>
                        </p>
                        <p>
                            <span>善意提醒：小心参考，理性投资</span>
                        </p>
                        <p>
                            <span>下载地址：<i>http://www.caimengjh.com</i> </span>
                        </p>
                        <div class="lineFen"></div>
                    </div>
                    <div :class="{showinfor:showtrue}" v-else-if="this.infordata!=null">
                        <div v-for="(item,index) in infordata.list" :key="index" id="text">
                            <p>
                                <span>{{item.issue}}</span>
                                <span>【{{item.plan}}】</span>
                                <span>{{item.position}}</span>
                                <span>{{item.cycle}}<i>期</i></span>
                                <span>{{item.betting_num}}<i>注</i></span>
                                <span v-if="item.win_num==0 && item.issue_num == item.cycle">挂<i>({{item.cycle}})</i> </span>
                                <span v-else-if="item.win_num>0 && item.issue_num == item.cycle">中<i>({{item.win_num}})</i> </span>
                                <span v-if="item.issue_num != item.cycle "><i>进行中({{item.cycle - item.issue_num}})</i></span>
                                <span>盈亏：{{item.surplus_deficit}}</span>
                            </p>
                            <p>
                                <span v-for="(con,index) in item.content" :key="index">【{{con}}】</span>
                            </p>
                            <p>
                                <span>（总<i>{{item.cycle}}</i>期/第<i>{{item.issue_num == 0 ? 1 : item.issue_num}}</i>期）</span>
                                <span>倍投方案:<i>{{item.multiply}}</i></span>
                                <span>当前倍数:<i>{{item.multiply}}</i>倍</span>
                            </p>
                            <div class="lineFen"></div>
                        </div>
                        <div v-if="infordata.list">
                            <div>
                                <p>
                                    <span>共<i>{{infordata.count}}</i>个计划 中 <i>{{infordata.count_win}}</i>个 成功率<i>{{infordata.win_rate}}</i></span>
                                </p>
                                <p>
                                    <span>最新开奖号:<i>{{infordata.new_open_code}}</i> </span>
                                </p>
                                <div class="lineFen"></div>
                            </div>
                            <p>
                                <span>彩盟人工计划</span>
                            </p>
                            <p>
                                <span>彩盟计划，精准的人工计划联盟！</span>
                            </p>
                            <p>
                                <span>善意提醒：小心参考，理性投资</span>
                            </p>
                            <p>
                                <span>下载地址：<i>http://www.caimengjh.com</i> </span>
                            </p>
                            <div class="lineFen"></div>
                        </div>
                            
                        </div>
                    </div>
                </div>
                
                <!--计划详情-->
                <div :class="{showtextinfor:opaplanxq}">
                    <div class="planxq">
                        <div class="tablebox">
                            <table id="tableId">
                                <thead>
                                    <th>期号（期）</th>
                                    <th>玩法</th>
                                    <th>周期</th>
                                    <th>注数</th>
                                    <th>倍投</th>
                                    <th>盈亏</th>
                                    <th>状态</th>
                                    <!-- <th>操作</th> -->
                                </thead>
                                <tbody>
                                    <tr v-if="this.totaldata==null">
                                        <td colspan="8">暂无数据</td>
                                    </tr>
                                    <tr v-else-if="!(this.totaldata==null)" v-for="(item,index) in totaldata.list" :key="index">
                                        <td>{{item.issue}}</td>
                                        <td>{{item.plan}}</td>
                                        <td>{{item.cycle}}</td>
                                        <td>{{item.betting_num}}</td>
                                        <td>{{item.multiply}}</td>
                                        <td>{{item.surplus_deficit}}</td>
                                        <td v-if="item.win_status==0" class="waitsize">待开奖</td>
                                        <td v-else-if="item.win_status==1" class="getsize">中奖</td>
                                        <td v-if="item.win_status==2" class="losesize">未中奖</td>
                                    </tr>
                                </tbody>
                            </table>   
                        </div>
                    </div>
                    <div class="tablebottom" v-if="this.totaldata!=null">
                        <span>实际收益：<i>{{totaldata.profit_count_rate}}</i> </span>
                        <span>实际盈利：<i>{{totaldata.profit_count_money}}</i></span>
                    </div>
                    <div class="tablebottom" v-else-if="this.totaldata==null">
                        <span>实际收益：<i></i> </span>
                        <span>实际盈利：<i></i> </span>
                    </div>
                </div>
                
            </div>

            <div class="leftBottom rightBottom">
                <div class="rightPlanbox" @click="resetplan">
                    <img src="../../assets/img/plan/images/reset_107.png" alt="" class="imgone">
                    <span>重置计划</span>
                </div>
                <div class="rightPlanbox" @click="copytext">
                    <img src="../../assets/img/plan/images/copy_101.png" alt="" class="imgtwo">
                    <span>复制</span>
                </div>
                <div class="rightPlanbox" @click="fresh">
                    <img src="../../assets/img/plan/images/refresh_98.png" alt="" class="imgthree">
                    <span>刷新</span>
                </div>
                <div class="rightPlanbox rightPlanboxo">
                    <img src="../../assets/img/plan/weixin.png" alt="" class="imgfive">
                    <span @click="sendmsgFn" >群发QQ/微信</span>
                </div>
            </div>
        </div> 
    </div>
</template>

<script>
import https from '@/public/https'
if (window.require) {
    var ipc = window.require('electron').ipcRenderer
}
export default {
        name: "plan",
        data() {
            return {
                showdel:true,  //弹框删除提示
                showword:true,  //弹框搜索提示
                waitcolor:false,  //待开奖
                getsizecolor:false, //中奖
                losecolor:false,   //未中奖
                deletecolor:true,   //表格删除
                opaplanxq:true,    //表格收益展示
                disactive:false,   //文本计划展示
                opaactive:false,   //文本计划点击下划线
                opalineactive:true,   //计划详情点击下划线
                activered:true,    //文本计划点击文字颜色
                showred:false,    //计划详情点击文字颜色
                none:true,        //当前选择
                showtrue:true,    //文本计划详情
                planname:"",  //搜索内容
                show:true,     //弹框
                checked: true,   //当前位置
                activeIndex:null,    //获取当前模块ID
                plandata:[],     //展示数据
                // name:"",
                namevalue:"",   //当前选择计划名
                planid: '1',  //计划下拉框
                infordata:{}, //文本数据
                totaldata:{},  //计划详情所有数据
                nowtime:'00:00',    //刷新时间
                plancol:0,    //收藏状态
                plancol_id: '',   //收藏id
            }
        },
        watch:{
            planname:function(){
                if(this.planname.length==10){
                    this.show=false;
                    this.showword=false;
                    this.showdel=true;
                }
            },
            leftinfo:function(){
                this.getdata();
            },
            leftinfoid:function(){
                this.getdata();
            }
        },
        computed:{
            leftinfoid(){
                return this.$store.state.leftMenu.id?this.$store.state.leftMenu.id: '46'
            },
            leftinfo(){
                if(this.$store.state.CaiPiaoType == 'l28'){
                    return '总和'
                } else{
                    return this.$store.state.leftMenu.name?this.$store.state.leftMenu.name:'定位胆'
                }
                
            }
        },
        created:function(){
            this.totaldata=null;
            this.getdata();
            this.BulkHair();
        },
        methods:{

            //qq/微信群发
            sendmsgFn(){  
                if(this.activeIndex){
                    if (window.require) { 
                        ipc.send('sendMsg','twostar');
                    }
                }
                
            },
   
            // 群发消息,接收主线程传递参数
            BulkHair(){
                if(!sessionStorage.twostar){
                    sessionStorage.twostar = 1;
                    if (window.require) { 
                        ipc.on('twostar-msg', (event, arg) => {
                        if(!arg){
                            window.location.href = `startQQManualSend:${this.$store.state.userInfo.id},${this.activeIndex},${sessionStorage.token}`; 
                        }
                            this.https('manual/BulkHair',{modules_id: this.activeIndex}).then(data =>{
                        })
                        });
                    } 
                }
            },


            // 弹框关闭
            close:function(){
                this.show=true;
            },
            //收藏
            collection:function(){ //点击收藏
                var params={
                    lottery_id:this.$store.state.lottery_id,
                    plan_id:this.activeIndex,
                    name:this.namevalue,
                    label_pc_id:this.$store.state.leftMenu.id
                }
                https.post("manual/postAddCollection",params,'post').then(data=>{
                    if(data.status == 1){
                        this.$toast({
                            message: '收藏成功'
                        })
                        this.plancol=1;
                    } else {
                        this.$toast({
                            message: data.message
                        })
                    }
                    
                })
                
            },
            //计划选择
            planchange:function(){
                this.planname='';
                this.getdata();
                // console.log(this.planid)
            },
            // 点击搜索
            searchplan:function(){
                this.getdata();
            },
            showkey(ev){
                if(ev.keyCode==13){
                    this.getdata();
                }
            },
            // 获取展示数据
            getdata:function(){
                var params={
                    search:this.planname,
                    expired_type:this.planid,
                    plan_id:this.leftinfoid,
                    lottery_id:this.$store.state.lottery_id
                }
                this.https("manual/getObtainPlanModulesList",params).then(data=>{
                    if(!data){
                        this.plandata=data;
                    }else{
                        for(var i=0;i<data.length;i++){
                            data[i].title=data[i].title.substring(0,8);
                        }
                        this.plandata=data;
                    }
                })
            },
            // 点击选择展示
            showplan:function(name,id){
                this.none=false;
                this.showtrue=false;
                this.namevalue=name;
                this.activeIndex = id;
                this.getonedata();
            },
            //获取详细文本计划
            getonedata:function(){
                this.plandata.forEach(item=>{
                    if(item.id==this.activeIndex){
                        this.plancol=item.is_collection;
                    };
                    if(item.is_collection == 1){
                        this.plancol_id = item.collection_id
                    }
                })
                //获取表格数据
                this.https("manual/getObtainModulesPlanList",{modules_id:this.activeIndex}).then(data=>{
                    this.totaldata=data;
                    this.nowtime = data.time

                })
                //获取文本数据
                this.https("manual/getObtainModulesPlanTextList",{modules_id:this.activeIndex}).then(data=>{
                    this.infordata=data;
                    // console.log(this.infordata)
                })
            },
            // 重置计划
            resetplan:function(){
                this.showtrue=true;
                this.activeIndex=null;
                this.totaldata=null;
                this.infordata={};
                // this.getonedata();
            },
            // 点击复制
            copytext:function () {
                var Url2=document.getElementById("text").innerText;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select(); 
                document.execCommand("Copy");
                oInput.className = 'oInput';
                oInput.style.display='none';
            },
            // 点击刷新
            fresh:function () {
                if(this.activeIndex!=null){
                    this.getonedata();
                }
            },
            //表格展示详情
            showinforplan:function(){
                this.activered=false;
                this.showred=true;
                this.opaactive=true;
                this.opalineactive=false;
                this.opaplanxq=false;
                this.disactive=true;
            },
            //文本展示详情
            showtext:function () {
                this.activered=true;
                this.showred=false;
                this.opaactive=false;
                this.opalineactive=true;
                this.disactive=false;
                this.opaplanxq=true;
            },
            //删除
            deletedata:function(id,index){
                this.totaldata.list.splice(index,1);  
                this.https("manual/getDeleteUserPlanById",{plan_id:id}).then(data=>{
                    this.$toast({
                        message: '删除成功'
                    })
                })
            },
        }
    }
</script>

<style scoped>
@import url(../../assets/css/plan/twostar.less);
</style>
<style>
.bodyBox .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #E52A20;
    border-color: #E52A20;
}
.bodyBox .el-checkbox__inner:hover{
    border-color: #E52A20;
}
.bodyBox .el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #E52A20 !important;
}
.bodyBox .el-checkbox__input.is-checked+.el-checkbox__label{
    color:#333333;
}
.bodyBox .el-checkbox__label{
    /* font-size:0.12rem; */
    color:#333333;
}
</style>
